<template>
<div class="code-com">
  <div class="gray-div" v-if="!isAuth">
    <img :src="message.qrcode">
    <div class="tip">请使用企业微信管理员账号扫描二维码，授权成功后点击下一步</div>
  </div>
  <div v-if="isAuth" style="text-align: center;margin-top: 80px;">
    <img style="height: 40px;" src="https://7-mopower-private.7moor.com/1/accessory/617778ff9548636d35dc72c4/7d82b8b0bf8411ec9c7571f4cc954df9.png">
    <div class="text">~ 授权成功 ~</div>
  </div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
@Component({
  name: 'CodeCom',
  components: {
  }
})
export default class CodeCom extends Vue {
  private timer: any = ''
  @Prop({ default: () => ({}) }) private message!: any;
  private isAuth = false
  private getAuthInfo () {
    commonAction({
      url: '/server-public/action/wx-suite/auth-info',
      method: 'get'
    }).then(res => {
      if (res.success) {
        if (res.data.stat === 'auth') {
          this.isAuth = true
          this.$emit('changeMsg', res.data)
          this.$emit('isDisabled', false)
        }
      }
    })
  }

  private mounted () {
    this.isAuth = false
    this.$emit('isDisabled', true)
    if (this.message.stat === 'auth') {
      this.isAuth = true
    }
    this.timer = window.setInterval(() => {
      this.getAuthInfo()
      if (this.isAuth) {
        window.clearInterval(this.timer)
      }
    }, 1000)
  }

  private beforeDestroy () {
    window.clearInterval(this.timer)
  }
}
</script>
<style lang="stylus" scoped>
.text {
  font-weight: 400;
  color: #303753;
  font-size 14px
  margin-top: 24px
}
.gray-div {
  width: 300px;
  height: 300px;
  padding: 0px 50px;
  background: #F3F6F9;
  border: 1px solid #E7E9ED;
  border-radius: 4px;
  margin: 60px auto 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  img {
    width: 200px;
    height: 200px;
    margin-top: 20px;
  }
  .tip {
    text-align: center;
    width: 100%;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #303753;
    line-height: 22px;
  }
}
</style>
